<template>
  <view class="textarea-with-count">
    <uni-easyinput
      type="textarea"
      autoHeight
      :placeholder="placeholder"
      :maxlength="maxLength"
      :clearable="false"
      @input="change"
      @blur="blur"
    ></uni-easyinput>
    <view class="count-view f jc-fe" v-if="showCount"
      ><text>{{ currentLength }}/{{ maxLength }}</text></view
    >
  </view>
</template>

<script>
import { ref } from "vue";
export default {
  name: "textarea-with-count",
  props: {
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    showCount: {
      type: Boolean,
      default: true,
    },
    maxLength: {
      type: Number,
      required: true,
    },
  },
  emits: ["textareaBlur"],
  setup(props, { emit }) {
    const currentLength = ref(0);
    const change = (str) => {
      currentLength.value = str.length;
    };
    const blur = (e) => {
      emit("textareaBlur", e.detail.value);
    };
    return {
      currentLength,
      change,
      blur,
    };
  },
};
</script>
<style lang='scss' scoped>
.textarea-with-count {
  width: 100%;
  background-color: #fff;
  ::v-deep .uni-easyinput__content {
    border: 0;
    .uni-easyinput__content-textarea {
      padding-right: 20rpx;
      .uni-textarea-placeholder {
        font-size: 30rpx;
      }
      .uni-textarea-textarea {
        font-size: 30rpx;
      }
    }
  }
  .count-view {
    padding: 10rpx 20rpx;
    height: 40rpx;
  }
}
</style>